<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
	<title>Document</title>
	<script>window.HELP_IMPROVE_VIDEOJS = false;</script>
	<link href="video-js.min.css" rel="stylesheet">
<script src="video.min.js"></script>
<style type="text/css">

	.vjs-playback-rate .vjs-playback-rate-value{
		font-size: 1em;
	    line-height: 3em;
	}
	.vjs-resolution-button .vjs-icon-placeholder:before {
  content: '标清';
  font-weight: normal;
  font-style: normal;
  font-size: 1em;
  line-height: 3em;
}

.vjs-resolution-button .vjs-resolution-button-label {
  font-size: 1em;
  line-height: 3em;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  box-sizing: inherit;
}

.vjs-resolution-button .vjs-menu .vjs-menu-content {
  width: 4em;
  left: 50%; /* Center the menu, in it's parent */
  margin-left: -2em; /* half of width, to center */
}

.vjs-resolution-button .vjs-menu li {
  text-transform: none;
  font-size: 1em;
}
.playerContainer{
  width: 100%;
  height: 240px;
}
.vjs-poster{
  background-size: cover
}
</style>
</head>
<body>
<div class="playerContainer">
  <video
    id="my-player"
    class="video-js  vjs-big-play-centered"
    controls
    preload="auto"
    poster="oceans.png"
    style="width:100%;height:100%"
    playsinline="true"
    webkit-playsinline="true">
</video>
</div>
	
</body>
<script type="text/javascript">
	var player = videojs('my-player',{
    sources:[
      {
        src:"http://pili-live-rtmp.sou001.com/kuailai/123.m3u8",
        type:"application/x-mpegURL"
      }
    ]
	});

	

</script>
</html>